<!DOCTYPE html>
<html>

	<head>
		<title>纯css3D旋转送给大家礼物</title>
		<meta charset="utf-8">
		<style type="text/css">
			/*全局样式*/
			
			body {
				background-color: #1a948d;
				background-repeat: no-repeat;
				background-position: top center;
				width: 100%;
				background-size: cover;
				height: 100%;
				min-height: 1000px;
				overflow: hidden;
				font-family: 'quicksandlight', Helvetica, Arial;
				color: #FFFFFF;
				text-shadow: -1px -1px 4px rgba(0, 0, 0, .35);
				filter: dropshadow(color=#000000, offx=1, offy=1);
			}
			
			header {
				margin-top: 30px;
				position: absolute;
				z-index: 5;
				width: 420px;
				padding-top: 10px;
				padding-bottom: 10px;
			}
			
			h1 {
				font-size: 36px;
				letter-spacing: -2.5px;
				margin-left: 30px;
			}
			
			h3 {
				font-size: 16px;
				letter-spacing: -1.5px;
				margin-top: 5px;
				margin-left: 35px;
			}
			/*a
{
    color:rgba( 255, 255, 255, .65 );
    text-decoration: none;
}*/
			
			a:hover {
				color: rgba( 255, 255, 255, 1);
			}
			
			.trans3d {
				-webkit-transform-style: preserve-3d;
				-webkit-transform: translate3d(0, 0, 0);
				-moz-transform-style: preserve-3d;
				-moz-transform: translate3d(0, 0, 0);
				-ms-transform-style: preserve-3d;
				-ms-transform: translate3d(0, 0, 0);
				transform-style: preserve-3d;
				transform: translate3d(0, 0, 0);
			}
			
			#contentContainer {
				position: absolute;
				margin-left: -500px;
				margin-top: -600px;
				left: 50%;
				top: 50%;
				width: 1000px;
				height: 1000px;
			}
			
			#carouselContainer {
				position: absolute;
				margin-left: -500px;
				margin-top: -600px;
				left: 50%;
				top: 50%;
				width: 1000px;
				height: 1000px;
			}
			
			.carouselItem {
				width: 320px;
				height: 300px;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -160px;
				margin-top: -90px;
				visibility: hidden;
			}
			
			.carouselItemInner {
				width: 320px;
				height: 250px;
				position: absolute;
				background-color: rgba(255, 255, 255, .75);
				border: 10px solid rgba(255, 255, 255, .5);
				color: aqua;
				font-size: 72px;
				left: 50%;
				top: 50%;
				margin-left: -160px;
				margin-top: -90px;
				text-align: center;
				padding-top: 50px;
			}
			
			.trans3d img {
				width: 320px;
				height: 300px;
				margin-top: -50px;
			}
		</style>
	</head>

	<body>
		<audio autoplay="autoplay" loop="loop"><source src="忧伤.mp3" type="audio/mpeg">
</audio>
		<div style="text-align:center;clear:both">
			<div id="contentContainer" class="trans3d">
				<!-- 用下拉列表定义全局样式实现鼠标样式翻滚 -->
				<section id="carouselContainer" class="trans3d">
					<figure id="item1" class="carouselItem trans3d">
						<div class="carouselItemInner trans3d"><img src="./image/1.jpg"></div>
					</figure>
					<figure id="item1" class="carouselItem trans3d">
						<div class="carouselItemInner trans3d"><img src="./image/2.jpg"></div>
					</figure>
					<figure id="item1" class="carouselItem trans3d">
						<div class="carouselItemInner trans3d"><img src="./image/3.jpg"></div>
					</figure>
					<figure id="item1" class="carouselItem trans3d">
						<div class="carouselItemInner trans3d"><img src="./image/4.jpg"></div>
					</figure>
					<figure id="item1" class="carouselItem trans3d">
						<div class="carouselItemInner trans3d"><img src="./image/5.jpg"></div>
					</figure>
					<figure id="item1" class="carouselItem trans3d">
						<div class="carouselItemInner trans3d"><img src="./image/6.jpg"></div>
					</figure>
					<figure id="item1" class="carouselItem trans3d">
						<div class="carouselItemInner trans3d"><img src="./image/7.jpg"></div>
					</figure>
					<figure id="item1" class="carouselItem trans3d">
						<div class="carouselItemInner trans3d"><img src="./image/8.jpg"></div>
					</figure>
					<figure id="item1" class="carouselItem trans3d">
						<div class="carouselItemInner trans3d"><img src="./image/9.jpg"></div>
					</figure>
					<figure id="item1" class="carouselItem trans3d">
						<div class="carouselItemInner trans3d"><img src="./image/10.jpg"></div>
					</figure>
					<figure id="item1" class="carouselItem trans3d">
						<div class="carouselItemInner trans3d"><img src="./image/11.jpg"></div>
					</figure>
					<figure id="item1" class="carouselItem trans3d">
						<div class="carouselItemInner trans3d"><img src="./image/12.jpg"></div>
					</figure>
					<figure id="item1" class="carouselItem trans3d">
						<div class="carouselItemInner trans3d"><img src="./image/13.jpg"></div>
					</figure>
					<!-- <figure id="item1" class="carouselItem trans3d"><div class="carouselItemInner trans3d"><img src="./image/14.jpg"></div></figure> -->
					<!-- <figure id="item1" class="carouselItem trans3d"><div class="carouselItemInner trans3d"><img src="./image/15.jpg"></div></figure> -->
					<!-- <figure id="item1" class="carouselItem trans3d"><div class="carouselItemInner trans3d"><img src="./image/16.jpg"></div></figure> -->
				</section>
			</div>
			<script src='js/libs.min.js'></script>
			<script src="js/index.js"></script>
	</body>

</html>